<template>
    <div class="father16">
        <h3>练习编程式导航</h3>
        <button @click="goto1">点击跳转1</button>
        <button @click="goto2">点击跳转2</button>
        <button @click="goto3">点击跳转3</button>
        <button @click="goto4">点击跳转4</button>
        <button @click="goto5">点击跳转5</button>
        <button @click="goto6">点击跳转6</button>
        <button @click="goto7">点击跳转7</button>
    </div>
</template>

<script>
export default {
    name: 'Father16',
    methods: {
        // 1.跳转到home路由，路径不带/
        // 这种跳转分两种情况：
        // 如果当前路径是根路径，不带路由的，比如http://localhost:8081/#/
        // 那么点击跳转，会跳去http://localhost:8081/#/home路径
        // 如果当前路径带路由的，比如http://localhost:8081/#/home/message
        // 点击跳转后，会跳去http://localhost:8081/#/home/home路径。
        // 会把最后一个/后面的内容替换成home
        goto1() {
            this.$router.push('home');
        },

        // 2. 这种带/的路径，是不管当前路径是什么，
        // 点击后都会跳转到http://localhost:8081/#/home路径
        goto2() {
            this.$router.push('/home');
        },

        // 3. 另外一种形式，即参数是对象
        goto3() {
            this.$router.push({path: 'home'});
        },

        // 4. 不带参数的命名路由跳转
        goto4() {
            this.$router.push({name: 'details'});
        },

        // 5. 带query形式参数的路径跳转
        goto5() {
            this.$router.push({
                path: '/home/message/details',
                query: {
                    mid: '007',
                    title: 'push跳转了'
                }
            })
        },

        // 6. 带query形式参数的命名路由跳转
        goto6() {
            this.$router.push({
                name: 'details',
                query: {
                    mid: '007',
                    title: 'push跳转了'
                }
            })
        },

        // 7. 带params形式参数的命名路由跳转
        // 注意，如果是params参数，不能使用路径，只能使用命名路由。这个和声明式路由一样的。
        goto7() {
            this.$router.push({
                name: 'paramDet',
                params: {
                    mid: '007',
                    title: 'push跳转了'
                }
            })
        }
    }
}
</script>

<style scoped>
button {
    margin-left: 5px;
}
</style>